import { Component, OnInit, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';
import { Router, NavigationExtras } from '@angular/router';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { TranslateService } from '@ngx-translate/core';
import { DefaultLanguageService } from '@services/default-language.service';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.page.html',
  styleUrls: ['./transaction.page.scss'],
})
export class TransactionPage implements OnInit {
  @ViewChild(IonInfiniteScroll,
    { read: false, static: false }) infiniteScroll: IonInfiniteScroll;
  i18n:any;
  dateType: any;
  isFirstPage = true;
  items:any[] = [1];
  dateTypes = [];
  constructor(
    private router: Router,
    public http: HttpClient,
    private defaultLanguageService:DefaultLanguageService,
    private translate: TranslateService
  ) { 
    let defultLanguage = this.defaultLanguageService.getDefaultLanguage();
    this.translate.setDefaultLang(defultLanguage);
    this.translate.use(defultLanguage);
    this.translate.get('myCredit.transaction_page').subscribe((value)=>{
      this.i18n = value;
      this.initPage();
    });
  }

  initPage(){
    this.dateType = this.i18n.month;
    this.dateTypes = [
      {
        type: this.i18n.year,
        num: 1
      },
      {
        type:  this.i18n.month,
        num: 2
      },
      {
        type: this.i18n.day,
        num: 3
      }
    ];
  }

  ngOnInit() {

  }


  selectDateType(item) {
    console.info(item);
    this.dateType = item.type;
  }

  loadData(InfiniteScroll) {
    console.info(InfiniteScroll);
    this.queryPressRecord(InfiniteScroll);
    if (this.isFirstPage) {
      InfiniteScroll.target.complete();
      // InfiniteScroll.target.disabled = false;
      this.isFirstPage=false;
    } else {
      if(this.items.length >= 2){
        InfiniteScroll.target.disabled = true;
      }
      // this.items.push(1);
      console.info("items = " + this.items.length);
      InfiniteScroll.target.complete();
    }
  }

  toDetail(data){
    let navigationExtras: NavigationExtras = {
      queryParams: data 
    };
    this.router.navigate(['/tabs/myCredit/transaction-detail'],navigationExtras);
  }

  datas = [];
  moreDatas = [];
  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  queryPressRecord(InfiniteScroll) {
      const url = '/scm/app/transactionList.do';      
      this.http.post(url,{'appUserId':1},this.httpOptions).subscribe(
        (response:any)=>{
          console.info(response);
          this.datas = this.datas.concat(response.responseBody);
        });
  }

  ngAfterViewInit() {
    const url = '/scm/app/transactionList.do';
    this.http.post(url, { "appUserId": "1" }, this.httpOptions).subscribe(
      (response: any) => {
        console.info(response);
        this.datas = response.responseBody;
      },
      (error) => {
        console.info(error);
      });
  }
}
